<template>
	<el-dialog title="新增文件" append-to-body :visible.sync="visible" width="992px" custom-class="file_form_dialog">
		<el-upload class="file_upload_wrapper" action :file-list="fileList" :accept="uploadAccept" v-bind="uploadConfig">
			<el-button size="small" type="primary">选择资源文件</el-button>
			<div slot="tip" class="el-upload__tip">
				<dl>
					<dt>文件类型：</dt>
					<dd v-for="(item, index) in fileTypeData" :key="index">{{ item }}</dd>
				</dl>
				<dl>
					<dt>文件大小：</dt>
					<dd>{{ dictConst['SYSTEM_ATTA_SIZE'] }}MB</dd>
				</dl>
			</div>
		</el-upload>
		<div class="file_upload_attrs">
			<el-tabs v-model="activeName">
				<el-tab-pane label="分类标签" name="classifyAttr"></el-tab-pane>
				<el-tab-pane label="标签" name="labelAttr"></el-tab-pane>
				<el-tab-pane label="编目" name="catalogAttr"></el-tab-pane>
			</el-tabs>
			<component :is="activeName"></component>
		</div>
		<template slot="footer">
			<el-button size="medium" type="primary" @click="handleSubmitFile">提交</el-button>
			<el-button size="medium" type="warning" @click="handleSaveFile">保存</el-button>
			<el-button size="medium" @click="visible = false">取消</el-button>
		</template>
	</el-dialog>
</template>

<script>
import lodash from 'lodash';
import { mapGetters } from 'vuex';
export default {
	props: {
		value: { type: Boolean, default: false },
		libId: { type: String, default: '' }
	},
	components: {
		labelAttr: () => import('./label'),
		catalogAttr: () => import('./catalog'),
		classifyAttr: () => import('./classify')
	},
	data() {
		// const
		return {
			visible: this.value,
			fileList: [],
			activeName: 'classifyAttr',
			formData: {},
			uploadConfig: {
				multiple: true,
				autoUpload: false,
				onChange: this.handleUploadChange,
				onSuccess: this.handleUploadSuccess,
				beforeUpload: this.handleBeforeUpload
			}
		};
	},
	computed: {
		...mapGetters(['dictConst']),
		libraryId() {
			return this.$route.params.id;
		},
		fileTypeData() {
			return this.dictConst['SYSTEM_ATTA_TYPE'].split(',');
		},
		checkedFolder() {
			return this.$route.query.folder || '0';
		},
		uploadAccept() {
			return this.fileTypeData.map((n) => `.${n}`).join();
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
		}
	},
	methods: {
		judgeFileEqual(file1, file2, arr) {
			for (let i = 0; i < arr.length; i++) {
				if (file1[arr[i]] !== file1[arr[i]]) {
					return false;
					break;
				}
			}
			return true;
		},

		handleUploadChange(file, fileList) {
			let differentFile = fileList.filter(
				(n) => n.raw.name === file.raw.name && n.raw.size === file.raw.size && n.raw.type === file.raw.type && n.raw.lastModified === file.raw.lastModified
			);
			differentFile.length > 1 && fileList.pop();
		},

		handleBeforeUpload(file) {
			console.log(file);
		},

		handleUploadSuccess() {},

		handleSubmitFile() {},

		handleSaveFile() {}
	}
};
</script>

<style lang="scss">
.file_form_dialog .el-dialog__body {
	padding: 0;
	height: calc(70vh - 60px);
}
</style>

<style lang="scss" scoped>
.file_upload_wrapper::v-deep {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	overflow: hidden;
	.el-upload {
		display: block;
		width: 100%;
		text-align: left;
		padding: 16px 0 0 16px;
		box-sizing: border-box;
	}
	.el-upload__tip {
		color: #909399;
		font-size: 14px;
		padding: 0 0 0 16px;
		margin-top: 0;
		dl {
			line-height: 20px;
			margin-top: 10px;
			overflow: hidden;
		}
		dt {
			float: left;
			font-weight: bold;
		}
		dd {
			float: left;
			margin-right: 5px;
			white-space: nowrap;
		}
	}
	.el-upload-list {
		flex: 1;
		width: 100%;
		margin-top: 10px;
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: auto;
		&:has(li) {
			border-top: solid 1px #ebeef5;
		}
		.el-upload-list__item {
			display: flex;
			align-items: center;
			margin-top: 0;
			.el-icon-close,
			.el-icon-close-tip {
				top: 10px;
				right: 10px;
			}
		}
		.el-upload-list__item-name {
			line-height: 1;
			padding: 10px 16px;
		}
	}
}

.file_upload_attrs::v-deep {
	width: 360px;
	flex-shrink: 0;
	border-left: solid 1px #ebeef5;
	.el-tabs__header {
		margin-bottom: 0;
	}
	.el-tabs__item {
		padding: 0 12px;
		&:nth-child(2) {
			padding-left: 12px;
		}
		&:last-child {
			padding-right: 12px;
		}
	}
}
</style>
